<template>
    <el-dialog :title="form.id ? '编辑' : '新增'" v-model="visible1"
               :close-on-click-modal="false" draggable width="25%">
        <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
            <el-row class="mb20">
                <el-form-item label="商品名称" prop="dataName">
                    <el-input v-model="form.dataName" placeholder="请输入资料名称"/>
                </el-form-item>
            </el-row>
            <el-row  class="mb20" v-if="form.goodsType=='0'">
                <el-form-item label="商品类型" prop="dataType">
                    <el-input v-model="form.dataType" placeholder="请输入商品类型"/>
                </el-form-item>
            </el-row>
            <el-row  class="mb20">
                <el-form-item label="关键点" prop="keyPoint">
                    <el-input v-model="form.keyPoint" placeholder="请输入关键点"/>
                </el-form-item>
            </el-row>
            <el-row  class="mb20">
                <el-form-item label="商品简介" prop="goodsDescribe">
                    <el-input v-model="form.goodsDescribe" style="width: 250px"  :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入资料简介"/>
                </el-form-item>
            </el-row>
            <el-row  class="mb20">
                <el-form-item>
                    <el-upload ref="uploadjpg" :file-list="fileList" limit="1" accept=".jpg,.png" class="upload-demo"  :action="officeUrl + '/uploadFile'"  :on-success="getFile" style="width: 600px">
                        <el-button type="primary">上传照片</el-button>

                    </el-upload>
                    <div class="el-upload__tip" style="margin-left: 15px"><i style="color: red;margin-right: 10px">*</i>支持扩展名：.jpg/.png 且不超过5MB</div>
                </el-form-item>
            </el-row>
        </el-form>
        <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible1 = false">取消</el-button>
          <el-button type="primary" @click="onSubmit" :disabled="loading">确认</el-button>
        </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts" name="SpkDataDialog">
    import { useDict } from '/@/hooks/dict';
    import { useMessage } from "/@/hooks/message";
    import { getObj, addObj, putObj } from '/@/api/train/spkZlData'
    import { rule } from '/@/utils/validate';
    import {ref} from "vue";
    import {ElMessage, UploadUserFile} from "element-plus";
    import {office, updateOnlyOffice} from "/@/api/train/kszlFile";
    const emit = defineEmits(['refresh']);

    // 定义变量内容
    const fileList = ref<UploadUserFile[]>([])
    const fileSize = ref()
    const uploadjpg = ref()
    const officeUrl = ref()
    const dataFormRef = ref();
    const visible1 = ref(false)
    const loading = ref(false)
    // 定义字典

    // 提交表单数据
    const form = reactive({
        dataName: '',
        goodsDescribe: '',
        keyPoint: '',
    });
    // 定义校验规则
    const dataRules = ref({
        dataName: [{ required: true, message: '请输入商品名称',trigger: 'change'}],
        goodsDescribe: [{ required: true, message: '请输入商品简介',trigger: 'change'}],
        keyPoint: [{ required: true, message: '请输入关键点',trigger: 'change'}],
        dataType: [{ required: true, message: '请输入商品类型',trigger: 'change'}],
    })
    // 打开弹窗
    const openDialog1 = (goodsType:string,id: string) => {
        form.goodsType = goodsType
        office().then((res)=>{
            officeUrl.value = res.data
        })
        visible1.value = true
        form.id = ''
        // 重置表单数据
        nextTick(() => {
            dataFormRef.value?.resetFields();
            uploadjpg.value.clearFiles()
        });
        // 获取spkZlData信息
        if (id) {
            form.id = id
            getspkZlDataData(id)
        }
    };
    const getFile = (val:any) =>{
        // console.log('上传成功',val)
         form.fileSize =  val.data.size
        form.onlyOfficeId = val.data.id
        // console.log(' fileSize.value', fileSize.value)
    }
    // 提交
    const onSubmit = async () => {
        const valid = await dataFormRef.value.validate().catch(() => {});
        if (!valid) return false;
        if( form.fileSize / 1024 / 1024 <= 5){
            try {
                loading.value = true;
                form.id ? await putObj(form) : await addObj(form);
                useMessage().success(form.id ? '修改成功' : '添加成功');
                visible1.value = false;
                emit('refresh');
            } catch (err: any) {
                useMessage().error(err.msg);
            } finally {
                loading.value = false;
            }
        }else {
            ElMessage({
                message: '图片大小已超过5MB',
                type: 'warning',
            })
        }
    };
    // 初始化表单数据
    const getspkZlDataData = (id: string) => {
        // 获取数据
        loading.value = true
        getObj(id).then((res: any) => {
            Object.assign(form, res.data)
        }).finally(() => {
            loading.value = false
        })
    };
    // 暴露变量
    defineExpose({
        openDialog1
    });
</script>